<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style_new.css" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if IE 7]>
    <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
  <![endif]-->
<!--[if lt IE 9]>
    <script src="../../assets/js/html5shiv.js"></script>
    <script src="../../assets/js/respond.min.js"></script>
  <![endif]-->
  <style type="text/css">
            @import "support/bootstrap/css/bootstrap.css";
            @import "support/bootstrap/dataTables/dataTables.bootstrap.css";
         
    #container {
        padding-top: 60px !important;
        width: 960px !important;
    }
    #dt_example .big {
        font-size: 1.3em;
        line-height: 1.45em;
        color: #111;
        margin-left: -10px;
        margin-right: -10px;
        font-weight: normal;
    }
    #dt_example {
        font: 95%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
        color: #111;
    }
    div.dataTables_wrapper, table {
        font: 13px/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    }
    #dt_example h1 {
        font-size: 16px !important;
        color: #111;
    }
    #footer {
        line-height: 1.45em;
    }
    div.examples {
        padding-top: 1em !important;
    }
    div.examples ul {
        padding-top: 1em !important;
        padding-left: 1em !important;
        color: #111;
    }
</style>
</head>
<body data-spy="scroll" data-target="#main-nav" class="ec-lite">
  <!-- Form đăng nhập -->
  <div class="fading-panel closed transitions">
    <div class="fading-panel-inner">
      <div class="fading-panel-content">
        <div class="login-bar">
          <div class="container">
            <form class="form-signin">
              <h2 class="form-signin-heading">Please sign in</h2>
              <input type="text" class="form-control" placeholder="Email address" autofocus=""> <input
                type="password" class="form-control" placeholder="Password"> <label class="checkbox"> <input
                type="checkbox" value="remember-me"> Remember me
              </label>
              <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Màn hình Home -->
  <div id="home" class="jumbotron home">
  <div class="">
    <!-- Đóng/mở màn form đăng nhập -->
    <div class="user-login-open glyphicon glyphicon-user glyphicon-inverse">Đăng nhập</div>
    <!-- Phần nội dung trên trang chủ -->
    <div class="home-content">
      <h1>Hello, world!</h1>
    </div>
    <!-- Hiệu ứng giới thiệu -->
    <div class="home-animation"></div>
    </div>
  </div>
  <!-- Menu chính -->
  <div id="main-nav-wrapper" class="main-nav wrapper">
    <div id="main-nav-inner-wrapper" class="main-nav inner-wrapper">
      <nav id="main-nav" class="navbar" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#home" class="main-nav-link">Home</a></li>
            <li><a href="#search" class="main-nav-link">Search</a></li>
            <li><a href="#intro" class="main-nav-link">Introduce</a></li>
            <li><a href="#org-chart" class="main-nav-link">Org. chart</a></li>
          </ul>
          <p class="navbar-text pull-right">
            Signed in as <a href="#" class="navbar-link">Mark Otto</a>
          </p>
        </div> <!-- /.navbar-collapse -->
      </nav>
      <div id="main-nav-inner" class="main-nav innner"></div>
    </div>
  </div>
  <!-- Giao diện tìm kiếm -->
  <div id="search-section" class="search-section row-fluid">
    <div id="search-bar" class="search-bar container row-fluid">
      <form action="" class="form-search" role="form">
        <div class="form-group">
          <div class="input-group">
            <input id="keyword" class="form-control" type="text" placeholder=".input-xxlarge"> <span
              class="input-group-btn">
              <button class="btn btn-default" type="button">Search</button>
            </span>
          </div>
        </div>
        <div class="form-group">
          <label class="checkbox-inline"> <input type="checkbox" id="" value="option1"> Option 01
          </label> <label class="checkbox-inline"> <input type="checkbox" id="" value="option2"> Option 02
          </label> <label class="checkbox-inline"> <input type="checkbox" id="" value="option3"> Option 03
          </label> <label class="checkbox-inline"> <input type="checkbox" id="" value="option4"> Option 04
          </label>
        </div>
      </form>
    </div>
    <div class="search-results row-fluid">
      <h3>NATO Phonetic Alphabet</h3>
	  <div class=".table-responsive">
      <table class="table table-bordered table-striped table-hover">
        <thead>
          <tr>
            <th>Letter</th>
            <th>Phonetic Letter</th>

          </tr>
        </thead>
        <tr>
          <th>A</th>
          <th>Alpha</th>

        </tr>
        <tr>
          <td>B</td>
          <td>Bravo</td>

        </tr>
        <tr>
          <td>C</td>
          <td>Charlie</td>

        </tr>

      </table>
	  </div>
    </div>
  </div>
  <div id="search" class="" style="min-height: 500px; background-color: #f0f;"></div>
  <!-- Linh tinh -->
  <div id="intro" class="" style="min-height: 500px; background-color: #0ff;"></div>
  <div id="org-chart" class="" style="background-color: #ff0;">
	<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example" width="100%">
    <thead>
        <tr>
            <th width="30%">Browser</th>
            <th width="20%">Rendering engine</th>
            <th width="18%">Platform(s)</th>
            <th width="20%">Engine version</th>
            <th width="12%">CSS grade</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Browser</th>
            <th>Rendering engine</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </tfoot>
</table>
  </div>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/modernizr.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/scripts.js"></script>
  <script type="text/javascript">
			if (!Modernizr.svg) {
				$('img[src*="svg"]').attr('src', function() {
					return $(this).attr('src').replace('.svg', '.png');
				});
			}

			var EC = EC || {

				window : $(window),
				html : $('html'),
				nav : $('#main-nav-inner-wrapper'),
				nav_wrapper : $('#main-nav-wrapper'),
				home : $('.home'),

				helpers : {},

				init : function(blogPage) {
					if (!blogPage) {
						EC.helpers.stickyNav();
					}
				}
			};
			$(window).resize(
					function() {
						if (!Modernizr.csstransitions) {
							var window_height = $(window).height();
						} else {
							var window_height = window.innerHeight;
						}
						$('.home').css('min-height',
								(window_height - EC.nav.outerHeight()) + 'px');
					});

			$(window).resize();
		</script>
  <script type="text/javascript">
			$(document).ready(function() {
				$('.main-nav-wrapper').height(EC.nav.outerHeight());
				EC.nav.affix({
					offset : {
						top : EC.nav.offset().top
					}
				});
			});
		</script>

</body>
</html>